﻿<section class="section" id="rating">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#rating">Rating</a>
        </h1>
    </header>

    <!-- Default -->
    <div class="row" style="margin-bottom: 2em;">
        <div class="col-md-12">
            <div class="color-fill-accent-neutral-high" style="padding: 1em; margin-bottom: 0.5em;">
                <div class="rating">
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating">
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-vivid-high" style="padding: 1em; margin-bottom: 0.5em;">
                <div class="rating color-alt">
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating color-alt">
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>
    </div>

    <!-- Top Label -->
    <div class="row" style="margin-bottom: 2em;">
        <div class="col-md-12">
            <div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating">
                    <div class="rating-label rating-label-top">Top label</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating">
    <div class="rating-label rating-label-top">Top label</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating color-alt">
                    <div class="rating-label rating-label-top">Top label</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating color-alt">
    <div class="rating-label rating-label-top">Top label</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>
    </div>

    <!-- Left Label -->
    <div class="row" style="margin-bottom: 2em;">
        <div class="col-md-12">
            <div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating">
                    <div class="rating-label rating-label-left">Left label</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating">
    <div class="rating-label rating-label-left">Left label</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating color-alt">
                    <div class="rating-label rating-label-left">Left label</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating color-alt">
    <div class="rating-label rating-label-left">Left label</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>
    </div>

    <!-- Small - top Label -->
    <div class="row" style="margin-bottom: 2em;">
        <div class="col-md-12">
            <div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating rating-small">
                    <div class="rating-label rating-label-top">Top label</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating rating-small">
    <div class="rating-label rating-label-top">Top label</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating rating-small color-alt">
                    <div class="rating-label rating-label-top">Top label</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating rating-small color-alt">
    <div class="rating-label rating-label-top">Top label</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>
    </div>

    <!-- Small - left Label -->
    <div class="row" style="margin-bottom: 2em;">
        <div class="col-md-12">
            <div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating rating-small">
                    <div class="rating-label rating-label-left">Left label</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating rating-small">
    <div class="rating-label rating-label-left">Left label</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating rating-small color-alt">
                    <div class="rating-label rating-label-left">Left label</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating rating-small color-alt">
    <div class="rating-label rating-label-left">Left label</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>
    </div>

    <!-- Small - right Label -->
    <div class="row" style="margin-bottom: 1em;">
        <div class="col-md-12">
            <div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating rating-small">
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                    <div class="rating-label rating-label-right">Right label</div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating rating-small">
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
    <div class="rating-label rating-label-right">Right label</div>
</div>
```
            {{/markdown}}

        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating rating-small color-alt">
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 80%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                    <div class="rating-label rating-label-right">Right label</div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating rating-small color-alt">
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 80%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
    <div class="rating-label rating-label-right">Right label</div>
</div>
```
            {{/markdown}}

        </div>
    </div>

    <!-- User value -->
    <div class="row" style="margin-bottom: 1em;">
        <div class="col-xs-24">
            <h2>User rating</h2>
        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-neutral-high" style="padding: 1em; margin-bottom: 0.5em;">
                <div class="rating">
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value rating-stars-value-user" style="width: 70%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating">
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value rating-stars-value-user" style="width: 70%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-vivid-high" style="padding: 1em; margin-bottom: 0.5em;">
                <div class="rating color-alt">
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 70%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating color-alt">
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value rating-stars-value-user" style="width: 70%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>
    </div>
</div>
```
            {{/markdown}}

        </div>
    </div>

    <!-- Clickable -->
    <div class="row" style="margin-bottom: 1em;">
        <div class="col-xs-24">
            <h2>Clickable rating</h2>
        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-neutral-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating">
                    <div class="rating-label rating-label-top">Rate this stuff:</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 70%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <div class="rating-stars-input">
                            <button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
                            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
                            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
                            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
                            <i class="glyph glyph-star"></i></button>
                        </div>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating">
    <div class="rating-label rating-label-top">Rate this stuff:</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 70%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <div class="rating-stars-input">
            <button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
            <i class="glyph glyph-star"></i></button>
        </div>
    </div>
</div>
```
            {{/markdown}}

        </div>

        <div class="col-md-12">
            <div class="color-fill-accent-vivid-high" style="padding: 1em 2em; margin-bottom: 0.5em;">
                <div class="rating color-alt">
                    <div class="rating-label rating-label-top">Rate this stuff:</div>
                    <div class="rating-stars">
                        <ul class="rating-stars-background">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <ul class="rating-stars-value" style="width: 70%">
                            <li><i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li><li>
                            <i class="glyph glyph-star"></i></li>
                        </ul>

                        <div class="rating-stars-input">
                            <button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
                            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
                            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
                            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
                            <i class="glyph glyph-star"></i></button>
                        </div>
                    </div>
                </div>
            </div>

            {{#markdown}}
```xml
<div class="rating color-alt">
    <div class="rating-label rating-label-top">Rate this stuff:</div>
    <div class="rating-stars">
        <!-- Background stars -->
        <ul class="rating-stars-background">
            <!-- Line-breaks are intentional to prevent extra spacing caused by "display: inline-block" -->
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <!-- Set the rating percentage as an inline style -->
        <ul class="rating-stars-value" style="width: 70%">
            <li><i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li><li>
            <i class="glyph glyph-star"></i></li>
        </ul>

        <div class="rating-stars-input">
            <button class="rating-btn" title="1"><i class="glyph glyph-star"></i></button><button class="rating-btn" title="2">
            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="3">
            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="4">
            <i class="glyph glyph-star"></i></button><button class="rating-btn" title="5">
            <i class="glyph glyph-star"></i></button>
        </div>
    </div>
</div>
```
            {{/markdown}}
        </div>
    </div>

    <div class="row">
        <div class="col-md-24">
            <p>The interaction might be implemented through a MVVM library. This is the jQuery sample of this demo:</p>

            {{#markdown}}
```javascript
$(function () {
    // Star rating
    $('.rating-btn').on('mouseenter', function () {
        var active = $(this);

        // Highlight the hovered star and the previous stars
        $(this).prevAll('.rating-btn').addClass('active');
        $(this).addClass('active');

        // Remove highlighting of the following stars
        $(this).nextAll('.rating-btn').removeClass('active');
    });

    // Remove highlight of all stars when leaving the container
    $('.rating-stars-input').on('mouseleave', function () {
        $(this).find('.rating-btn').removeClass('active');
    });
});
```
            {{/markdown}}
        </div>
    </div>
</section>
